<template>
  <el-popover placement="bottom" width="500" trigger="hover">
        <div class="msg-title"><span>通知消息</span><el-button size="mini">全部已读</el-button></div>
    <!-- <avue-crud :data="data"
               :option="option"></avue-crud> -->
      <ul class="msg-list">
        <li class="msg-list-li">
          <div>【设备借用】<span class="msg-list-status">[ 不通过 ]</span>审批单号：2019092402</div>
          <div class="time">2018-11-23</div>
        </li>
        <li class="msg-list-li">
          <div>【设备借用】<span class="msg-list-status1">[ 通过 ]</span>审批单号：2019092402</div>
          <div class="time">2018-11-23</div>
        </li>
      </ul>
      <el-pagination v-if="totalPage > 0" class="table_page_number" align='right'  layout="total,slot,prev,pager, next" :small="true" :current-page="currentPage" :total="totalPage" @current-change="changePage"></el-pagination>
    <!-- <router-link class="top-mag__menu"
                 :to="{path:'/info/message'}">
      <el-button type="text"
                 size="mini">查看全部</el-button>
    </router-link> -->
    <div slot="reference"
         class="top-bar__item top-bar__item--show">
      <el-badge is-dot>
        <i class=" el-icon-bell"></i>
      </el-badge>
      <span style="font-size:14px;margin-left:5px">通知消息</span>
    </div>
  </el-popover>
</template>

<script>
export default {
  name: "top-mag",
  data () {
    return {
      totalPage:9000,
      currentPage:1,
    }
  },
  methods:{
    // 分页
    changePage(page){

    },
  }

}
</script>

<style lang="scss">
.top-mag {
  &__menu {
    float: right;
  }
}
.msg-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  flex-direction: row;
}
.msg-list{
  font-size: 14px;
  padding-bottom: 10px;
  &-li{
      display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    padding: 10px 0;
    border-bottom: 1px dotted #888;
    cursor: pointer;
  }
  &-status{
    color: red
  }
  &-status1{
    color: #1CC4E4
  }
}
.msg-list .time{
    color: #999
  }
  .top-bar__item.top-bar__item--show {
    cursor: pointer;
  }
</style>
